import Taro, {Component} from '@tarojs/taro'
import {View, Button, Text, ScrollView, Image, Input, Picker, Textarea, Form, Block} from '@tarojs/components'
import {AtIcon, AtCurtain, AtButton} from 'taro-ui'
import {toJS} from "mobx";
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime, isLetter, companyName} from '../../utils/common'

// import PickerArea from '../../components/PickerArea'
// import FooterMenu from '../../components/FooterMnue'
import './index.less'
import 'taro-ui/dist/style/components/curtain.scss';
import PickerArea from "../../components/PickerArea";


interface IHomeProps extends IStoreProps {
}

@inject("stores")
@observer
class Index extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    huocheId: 3, // 货车ID 3 或 10
    huocheId2: 10, // 货车ID 3 或 10

    isOpen: false,
    isCards: true, // 是否上牌
    isPublic: 1, // 是否是公车，2 是公车 1 是私家车
    taxYearsArr: [], // 报税年份
    taxYears: '', // 报税年份
    fileList: Array(7).fill(null), // 相关文件
    carIds: Array(7).fill(null), // 车牌号 未使用了
    inputCarIds: '', // 车牌号码
    currentCarId: 1,
    navs: [], // 车辆分类
    currentNavId: 1,
    currentChinaIndex: -1, // 省简称索引
    carInfo: {}, // 汽车分类信息
    currentSpecs: [], // 当前分类和省份对应的所有规格
    currentSelectSpec: {}, // 当前选择的规格
    currentSelectSpecIndex: 0, // 当前选择规格索引
    china: ['京', '津', '冀', '晋', '蒙', '辽', '吉', '黑', '沪', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '桂', '琼', '渝', '川', '黔', '云', '藏', '陕', '甘', '青', '宁', '新', '台', '港', '澳'],
    taxPrice: 0, // 当前选择的规格报税价格
    trueTaxPrice: {}, // 根据用户选择的规格和报税年份获取的价格
    userType: 1, // 用户等级类型
    focusId: 0,
    ableProvince2: [
      { value: '530000', title: '云南省', isShow: true },
      { value: '420000', title: '湖北省', isShow: false },
      { value: '360000', title: '江西省', isShow: false },
      { value: '410000', title: '河南省', isShow: false },
      ], // 出单省份, 默认只显示云南，公车时只显示湖南

    ableProvince: [
      { value: '530000', title: '云南省', isShow: true },
    ], // 出单省份, 默认只显示云南，公车时只显示湖北

    carNumber: '', // 车牌号 ,
    isRegister: '', // 是否上牌 ,
    province: '530000', // 出单省份 ,
    provinceIndex: 0, // 索引
    carSpecId: '', // 车辆规格id ,
    carSpecIdIndex: 0, // 车辆规格id索引 ,
    quality: 0, // 货车整备质量,
    carUserName: '', // 车主姓名 ,
    carDrivePicture: '', // 行驶证第一页 ,
    carDrivePicture2: '', // 行驶证第二页 ,
    carUserPicture: '', // 车主身份证正面照 ,
    carUserPicture2: '', // 车主身份证反面照 ,
    buyCarPicture: '', // 购车发票 ,
    carStandardPicture: '', // 车辆合格证 ,
    createYear: '', // 缴费年份 ,
    payType: '', // 支付类型 (0 = NoPay , 1 = WechatPay , 2 = AliPay , 3 = ApplePay , 4 = WalletPay , 5 = WechatAppPay ) = ['0', '1', '2', '3', '4', '5']
    message: '', // 备注信息
    isSubmit: false, // 是否提交

  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: companyName + '车船税代缴平台'})
    let {carIds} = this.state
    carIds[0] = '云'
    let currentTaxYears = new Date().getFullYear()
    let userInfo = getRuntime().getUserInfo() || {}
    this.setState({
      taxYears: currentTaxYears,
      carIds,
      taxYearsArr: [
        {
          isSelect: true,
          year: currentTaxYears
        },
        {
          isSelect: false,
          year: currentTaxYears - 1
        },
        {
          isSelect: false,
          year: currentTaxYears - 2
        },
        {
          isSelect: false,
          year: currentTaxYears - 3
        }],
      userType: userInfo.vipLevel || 0
    })
    this.getCarCategories()
    this.getCar()
  }

  componentDidShow(): void {
    Taro.setNavigationBarTitle({title: companyName + '车船税代缴平台'})
  }

  link(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  getCarCategories() {
    let {declareTaxStore} = this.props.stores
    declareTaxStore.getCarCategories({
      type: this.state.isPublic,
      callback: res => {
        this.setState({navs: toJS(res.items)})
      }
    })
  }

  getCar() {
    let {declareTaxStore} = this.props.stores
    let {currentNavId, userType, province} = this.state
    declareTaxStore.getCar({
      formCarCategoryId: currentNavId,
      formAreaCode: province,
      callback: res => {
        let currentSpecs = res['carSkuCategories'][0]['carSkus']
        this.setState({
          carInfo: res,
          currentSpecs
        })
      }
    })
  }

  // 是否上牌
  clickRadio(field: string, value: any) {
    let currentTaxYears = new Date().getFullYear()
    let taxYearsArr = this.state.taxYearsArr
    if(!value) {
      // 未上牌车只能交今年和明年
      taxYearsArr = [
        {
          isSelect: true,
          year: currentTaxYears
        }
      ]
    } else {
      taxYearsArr = [
        {
          isSelect: true,
          year: currentTaxYears
        },
        {
          isSelect: false,
          year: currentTaxYears - 1
        },
        {
          isSelect: false,
          year: currentTaxYears - 2
        },
        {
          isSelect: false,
          year: currentTaxYears - 3
        }]
    }
    this.setState({
      [field]: value,
      taxYearsArr
    }, () => { this.getTaxPrice() })
  }

  setIsPublic = (field: string, value: number) => {
    let { taxYearsArr } = this.state
    let currentNavId = 1
    let ableProvinceTemp = [{ value: '530000', title: '云南省', isShow: true }]
    if(value === 2) { currentNavId = 11, // 出单省份改为湖南省
      ableProvinceTemp = [{ value: '420000', title: '湖北省', isShow: false }]
    }

    let currentYears = new Date().getFullYear()
    taxYearsArr.map(item => {
      if(item.year === currentYears) {
        item.isSelect = true
      }else { item.isSelect = false }
    })

    this.setState({
      quality: 0,
      currentSelectSpec: {},
      currentSelectSpecIndex: 0,
      trueTaxPrice: {},
      // isPublic,
      ableProvince: ableProvinceTemp,
      province: ableProvinceTemp[0]['value'],
      taxYears: currentYears,
      taxYearsArr
    })

    this.setState({
      [field]: value,
      currentNavId
    }, () =>
    {
      this.getCarCategories()
      this.getCar()
    })
  }

  // 纳税年份， 可多选
  setRadio(index: number) {
    let taxYearsArr = this.state.taxYearsArr
    let temp = 0
    taxYearsArr.map((item, ind) => {
      if (index === ind) {
        item.isSelect = true
      }else {
        item.isSelect = false
      }
      if (item.isSelect) {
        temp = item.year
      }
    })
    this.setState({
      taxYearsArr,
      taxYears: temp
    }, () => {
      this.getTaxPrice()
    })
  }

  uploadFile(index: number) {
    getRuntime().upload((res) => {
      let temp = this.state.fileList
      temp.splice(index, 1, res)
      this.setState({ fileList: temp })
    }, 1)
  }

  setCarIds(index: number, e) {
    let {currentCarId} = this.state
    let val = e.detail.value
    if (!val) return
    if (isLetter(val)) {
      val = val.toUpperCase()
    }
    let carIds = this.state.carIds
    carIds.splice(index, 1, val)
    let focusId = currentCarId + 1
    if (currentCarId === 6) {
      focusId = 6
    }
    this.setState({carIds: carIds, focusId})
  }

  setCurrentCarId(index: number) {
    if (index === 0) {
      this.setState({isOpen: true})
    }
    this.setState({currentCarId: index, focusId: index})
  }

  setCurrentNavId(index: number) {
    let { taxYearsArr } = this.state


    let currentYears = new Date().getFullYear()
    taxYearsArr.map(item => {
      if(item.year === currentYears) {
        item.isSelect = true
      }else { item.isSelect = false }
    })

    this.setState({
      quality: 0,
      currentSelectSpec: {},
      currentSelectSpecIndex: 0,
      trueTaxPrice: {},
      currentNavId: index,
      // isPublic,
      taxYears: currentYears,
      taxYearsArr
      }, () => this.getCar())
  }

  // 地址选择，不同的省份规格不同的价格
  onPicketArea(e) {
    let {ableProvince} = this.state
    console.log(ableProvince)
    let index = e.detail.value
    this.setState({
      province: ableProvince[index]['value'],
      provinceIndex: index,
    }, () => this.getCar())
  }

  // 规格选择
  changePicker(field: string, e) {
    let index = e.detail.value
    let {currentSpecs} = this.state
    let currentSelectSpec = currentSpecs[index]
    this.setState({
      currentSelectSpecIndex: index,
      currentSelectSpec,
    }, () => {
      this.getTaxPrice()
    })
  }

  // 关闭幕帘
  onClose() {
    this.setState({isOpen: false})
  }

  setIndex(field: string, val: any) {
    let {carIds, china} = this.state
    carIds[0] = china[val]
    this.setState({[field]: val, carIds, isOpen: false})
  }

  // 货车整备质量输入框e
  qualityInput(e) {
    let quality = e.detail.value
    console.log(quality)
    if (!quality || quality <= 0) {
      return false;
    }
    this.setState({quality}, () => {
      this.getTaxPrice()
    })
  }

  // 根据客户选择获取缴费价格 规格选择触发、纳税年份选择触发、货车整备质量触发
  getTaxPrice() {
    // createYear
    let {currentNavId, huocheId, currentSelectSpec, taxYears, quality, isCards, isPublic} = this.state
    if (!currentSelectSpec.id || !taxYears) {
      return false;
    }
    let {homeStore} = this.props.stores
    homeStore.getTaxPrice({
      isRegister: isCards,
      createYear: taxYears,
      carSkuCategoryId: currentSelectSpec['id'],
      carType: isPublic,
      quality,
      callback: res => {
        this.setState({trueTaxPrice: res})
      }
    })
  }

  formateCarName(value: string) {
    if(value.includes('-')) {
      return value.substr(value.indexOf('-') + 1)
    }
    return value;
  }

  submit(e) {
    // 货车需要身份证反面和行驶证第二页
    let {inputCarIds, carUserName, message, quality} = e.detail.value
    let {isCards, taxYears, fileList, carIds, province, navs, currentNavId, carInfo, carSpecIdIndex, taxPrice, huocheId,huocheId2,
      currentSelectSpec, currentSelectSpecIndex,trueTaxPrice,isPublic} = this.state
    let carSpecId = currentSelectSpec.id

    let carUserPicture = fileList[0] // 身份证
    let carDrivePicture = fileList[1] // 行驶证
    let buyCarPicture = fileList[2] // 购车发票
    let carStandardPicture = fileList[3] // 车辆合格证
    let carUserPicture2 = fileList[4] // 身份证反面
    let carDrivePicture2 = fileList[5] // 行驶证反面
    // if (carIds.filter(item => item).length !== 7) { getRuntime().showToast('请填写车牌号~'); return }
    if (!inputCarIds || inputCarIds.length !== 7) {getRuntime().showToast('请填写正确的车牌号~');return}
    if (!province) {getRuntime().showToast('请选择出单省份~');return}
    if (!carSpecId) {getRuntime().showToast('请选择车辆规格~');return}
    // if (isPublic === -1) {getRuntime().showToast('请选择车辆用途~');return}
    if(isPublic === 2) {
      // 公车
      if (!carUserName) {getRuntime().showToast('请填写企业名称~');return}
      if (!carUserPicture) {getRuntime().showToast('请上传法人身份证正面照~');return}
    }else {
      if (!carUserName) {getRuntime().showToast('请填写车主姓名~');return}
      if (!carUserPicture) {getRuntime().showToast('请上传车主身份证正面照~');return}
    }
    if (isCards && !carDrivePicture) {getRuntime().showToast('请上传行驶证~');return}
    if (!isCards && !buyCarPicture) {getRuntime().showToast('请上传购车发票~');return}
    if (!isCards && !carStandardPicture) {getRuntime().showToast('请上传车辆合格证~');return}
    if (currentNavId === huocheId || currentNavId === huocheId2 && !quality) {getRuntime().showToast('请输入货车整备质量~');return}
    // 货车的私家车需要上传身份证反面和行驶证第二页
    /*if (currentNavId === huocheId && isCards && isPublic === 1) {
      if (!carUserPicture2) {
        getRuntime().showToast('请上传身份证反面~');
        return
      }
      if (!carDrivePicture2) {
        getRuntime().showToast('请上传行驶证第二页~');
        return
      }
    }*/

    // 车牌号转大写
    let temp = inputCarIds.split('') || []
    temp.map((item, index) => {
      if(isLetter(item)){
        temp[index] = item.toUpperCase()
      }
    })
    inputCarIds = temp.join('')
    let {declareTaxStore} = this.props.stores
    this.setState({ isSubmit: true })
    declareTaxStore.buyCarTax({
      form: {
        carNumber: inputCarIds, isRegister: isCards, province, carSpecId, carUserName, carDrivePicture, carDrivePictureTwo: carDrivePicture2,
        carUserPicture,carUserPictureTwo: carUserPicture2, buyCarPicture, carStandardPicture, createYear: taxYears, message, payType: 6, quality,
        carType: isPublic
      },
      callback: res => {
        console.log(res)
        // orderNo 订单字段
        this.setState({ isSubmit: false })
        if (!res.payParams) {
          getRuntime().showToast('系统支付错误，请联系客服处理~');return false;}
          getRuntime().wxPay(JSON.parse(res.payParams), () => {
          // 缓存报税信息字段支付成功页使用
          let taxInfo = {
            carType: carInfo['name'], // 车辆名称
            carSpec: currentSelectSpec.sku || '',
            carNumber: inputCarIds,
            taxPrice: trueTaxPrice.price || 0,
            orderNo: res.id
          }
          getRuntime().setStorage('taxInfo', taxInfo)
          getRuntime().navigateTo('/pages/declareTax/paySuccess?orderId=' + res.id)
        })
      },
      errorCallBack: () => {
        this.setState({ isSubmit: false })
      }
    })
  }

  render() {
    let {
      isOpen, isCards, taxYearsArr, taxYears, fileList, carIds, currentCarId, currentNavId, currentChinaIndex, navs, carInfo, focusId,
      china, taxPrice, carSpecId, carSpecIdIndex, ableProvince, province, provinceIndex, currentSpecs, currentSelectSpec, currentSelectSpecIndex,
      trueTaxPrice, huocheId,huocheId2, isSubmit, isPublic
    } = this.state

    let showCarUserName = '车主姓名'
    if(isPublic === 2) { showCarUserName = '企业名称' }
    isSubmit = false
    return (
      <View className='declare-tax'>
        <ScrollView className='scroll-column' scrollX scrollWithAnimation>
          <View className={isPublic === 1 ? 'scroll-column__title scroll-column__active' : 'scroll-column__title'} onClick={this.setIsPublic.bind(this,'isPublic', 1)}>私家车</View>
          <View className={isPublic === 2 ? 'scroll-column__title scroll-column__active' : 'scroll-column__title'} onClick={this.setIsPublic.bind(this,'isPublic', 2)}>公车</View>
         {/* {
            navs.length > 0 && navs.map(item => {
              return (
                <View
                  className={currentNavId === item.id ? 'scroll-column__title scroll-column__active' : 'scroll-column__title'}
                  key={item.id}
                  onClick={this.setCurrentNavId.bind(this, item.id)}
                >{item.name}</View>
              )
            })
          }*/}
        </ScrollView>

        <View className='interval' />

        <View className='form-wrap content-30'>
          <Form onSubmit={this.submit.bind(this)}>
            {
              isPublic===2&&
                <View style={{paddingTop:'20px', color:'red'}}>
                  注意：公车只能由湖北省出票
                </View>
            }

            <View className='form-wrap__group'>
              <View className='form-wrap__title'>车辆分类</View>
              <View className='form-wrap__content form-wrap__radio'>
                {
                  navs.map(item => {
                    return(
                      <View className={currentNavId === item.id ? 'radio radio-active' : 'radio'} key={item.id} style={{ flexWrap: 'wrap', justifyContent: 'spaceBetween'}}
                            onClick={this.setCurrentNavId.bind(this, item.id)}>{this.formateCarName(item.name)}</View>
                    )
                  })
                }
              </View>
            </View>

            {/*上下结构*/}
            <View className='form-wrap__group form-wrap__tb' style={{display: 'none'}}>
              <View className='form-wrap__title'>车牌号码</View>
              <View className='form-wrap__content form-wrap__carIds'>
                {
                  carIds.map((item, index) => {
                    let tpl = null
                    if (index === 0) {
                      tpl = <View className={currentCarId === index ? 'input input-active inputs' : 'input inputs'}
                        /*onChange={this.setCarIds.bind(this, index)}
                        onClick={this.setCurrentCarId.bind(this, index)}*/>{item}</View>
                    } else {
                      tpl = <Input className={currentCarId === index ? 'input input-active' : 'input'} value={item}
                                   onChange={this.setCarIds.bind(this, index)} maxLength={1}
                                   onFocus={this.setCurrentCarId.bind(this, index)}
                                   focus={focusId === index}
                      />
                    }
                    return tpl
                  })
                }
                <View className='point' />
              </View>
            </View>

            <View className='form-wrap__group'>
              <View className='form-wrap__title'>车牌号码</View>
              <View className='form-wrap__content'>
                <Input className='input' name='inputCarIds' maxLength={7} placeholderClass='placeholder-class'
                       placeholder='请输入车牌号码' />
              </View>
            </View>

            {/*单选框*/}
            <View className='form-wrap__group'>
              <View className='form-wrap__title'>是否上牌</View>
              <View className='form-wrap__content form-wrap__radio'>
                <View className={isCards ? 'radio radio-active' : 'radio'}
                      onClick={this.clickRadio.bind(this, 'isCards', true)}>是</View>
                <View className={!isCards ? 'radio radio-active' : 'radio'}
                      onClick={this.clickRadio.bind(this, 'isCards', false)}>否</View>
              </View>
            </View>

            {/*选择框*/}
            <View className='form-wrap__group'>
              <View className='form-wrap__title'>出单省份</View>
              <View className='form-wrap__content form-wrap__select'>
                {/*<PickerArea level={1} onPicketArea={this.onPicketArea.bind(this)} />*/}
                <Picker className='select' mode='selector' range={ableProvince} rangeKey='title'
                        onChange={this.onPicketArea.bind(this)} >
                  <View className='select' style={{display: 'flex'}}>
                    {!province && <View className='select placeholder-class'>请选择出单省份</View>}
                    {province && <View className='select'>{ableProvince[provinceIndex]['title']}</View>}
                    <AtIcon className='drop-icon' value='chevron-right' size='20' color='#d1d1d1'/>
                  </View>
                </Picker>
              </View>
            </View>

            {/*车辆规格*/}
            <View className='form-wrap__group'>
              <View className='form-wrap__title'>车辆规格</View>
              <View className='form-wrap__content form-wrap__select'>
                <Picker className='select' mode='selector' range={currentSpecs} rangeKey={'sku'}
                        onChange={this.changePicker.bind(this, 'carSpecId')}>
                  <View className='select' style={{display: 'flex'}}>
                    {!currentSelectSpec['sku'] && <View className='select placeholder-class'>请选择车辆规格</View>}
                    {currentSelectSpec['sku'] && <View className='select'>{currentSelectSpec['sku']}</View>}
                    <AtIcon className='drop-icon' value='chevron-right' size='20' color='#d1d1d1'/>
                  </View>
                </Picker>
              </View>
            </View>

            {/*说明框*/}
            {currentSelectSpec.discription &&
            <View className='form-wrap__group'>
               <View className='form-wrap__title'/>
               <View className='form-wrap__content desc'>
                 {currentSelectSpec.discription}
               </View>
            </View>
            }
            {
              currentNavId === huocheId &&
              <View className='form-wrap__group'>
                 <View className='form-wrap__title'>整备质量(kg)</View>
                 <View className='form-wrap__content'>
                    <Input className='input' name='quality' type='number' placeholderClass='placeholder-class'
                           placeholder='整备质量必须与行驶证一致(单位:KG)'
                           onInput={this.qualityInput.bind(this)}
                    />
                 </View>
              </View>
            }
            {
              currentNavId === huocheId2 &&
              <View className='form-wrap__group'>
                 <View className='form-wrap__title'>整备质量(kg)</View>
                 <View className='form-wrap__content'>
                    <Input className='input' name='quality' type='number' placeholderClass='placeholder-class'
                           placeholder='整备质量必须与行驶证一致(单位:KG)'
                           onInput={this.qualityInput.bind(this)}
                    />
                 </View>
              </View>
            }

            {/*价格框*/}
            {
              ((isPublic===1 && currentNavId !== huocheId) || (isPublic===2&&currentNavId !== huocheId2)) &&
              <View className='form-wrap__group'>
                 <View className='form-wrap__title'>法定税额</View>
                 <View className='form-wrap__content '>
                    <Text className='small color-theme'>￥</Text>
                    <Text className='price color-theme'>{currentSelectSpec.price || 0}</Text>
                    <Text className='small color-theme'>元/每辆</Text>
                 </View>
              </View>
            }
            {
              ((isPublic===1&&currentNavId === huocheId) || (isPublic===2&&currentNavId === huocheId2)) &&
              <View className='form-wrap__group'>
                 <View className='form-wrap__title'>法定税额</View>
                 <View className='form-wrap__content '>
                    <Text className='small color-theme'>￥</Text>
                    <Text className='price color-theme'>{currentSelectSpec.price || 0}</Text>
                    <Text className='small color-theme'>元/整备质量每吨</Text>
                 </View>
              </View>
            }

            <View className='form-wrap__group'>
              <View className='form-wrap__title'>纳税年份</View>
              <View className='form-wrap__content form-wrap__radio form-wrap__radio2'>
                {
                  taxYearsArr.map((item, index) => {
                    return (
                      <View className={item.isSelect ? 'radio radio-active' : 'radio'}
                            onClick={this.setRadio.bind(this, index)}>{item.year}</View>
                    )
                  })
                }
              </View>
            </View>

            {/*输入框*/}
            <View className='form-wrap__group'>
              <View className='form-wrap__title'>{showCarUserName}</View>
              <View className='form-wrap__content'>
                <Input className='input' name='carUserName' placeholderClass='placeholder-class' placeholder='请输入' />
              </View>
            </View>

            {/*上传文件框*/}
            <View className='form-wrap__group form-wrap__tb'>
              <View className='form-wrap__title'>上传相关证件</View>
              {
                isCards &&
                <View className='form-wrap__content form-wrap__file'>
                   <View className='file-wrap' onClick={this.uploadFile.bind(this, 0)}>
                      <Image src={require('../../assets/img/icon_04.png')} className='upload-icon' />
                     {
                       isPublic===2&& <View className='title placeholder-class'>请上传法人身份证正面照 <View>(证件号码清晰)</View></View>
                     }
                     {
                       isPublic!==2&& <View className='title placeholder-class'>请上传车主身份证正面照 <View>(证件号码清晰)</View></View>
                     }
                     {
                       fileList[0] && <Image src={fileList[0]} className='upload-img' />
                     }
                   </View>
                  {/*{
                    // 货车-身份证反面
                    isPublic !== 2 &&currentNavId === huocheId &&
                    <View className='file-wrap' onClick={this.uploadFile.bind(this, 4)}>
                       <Image src={require('../../assets/img/icon_04.png')} className='upload-icon' />
                       <View className='title placeholder-class'>请上传车主身份证反面照 <View>(证件清晰)</View></View>
                      {
                        fileList[4] && <Image src={fileList[4]} className='upload-img'/>
                      }
                    </View>
                  }*/}

                   <View className='file-wrap' onClick={this.uploadFile.bind(this, 1)}>
                      <Image src={require('../../assets/img/icon_04.png')} className='upload-icon'/>
                      <View className='title placeholder-class'>请上传机动车行驶证照片 <View>(第一页,证件号码清晰)</View></View>
                     {
                       fileList[1] && <Image src={fileList[1]} className='upload-img'/>
                     }
                   </View>
                  {/*{
                    // 货车-行驶证第二页
                    currentNavId === huocheId &&
                    <View className='file-wrap' onClick={this.uploadFile.bind(this, 5)}>
                       <Image src={require('../../assets/img/icon_04.png')} className='upload-icon'/>
                       <View className='title placeholder-class'>请上传机动车行驶证照片 <View>(第二页)</View></View>
                      {
                        fileList[5] && <Image src={fileList[5]} className='upload-img'/>
                      }
                    </View>
                  }*/}
                </View>
              }
              {
                !isCards &&
                <View className='form-wrap__content form-wrap__file'>
                   <View className='file-wrap' onClick={this.uploadFile.bind(this, 0)}>
                      <Image src={require('../../assets/img/icon_04.png')} className='upload-icon'/>
                     {
                       isPublic===2&& <View className='title placeholder-class'>请上传法人身份证正面照 <View>(证件号码清晰)</View></View>
                     }
                     {
                       isPublic!==2&& <View className='title placeholder-class'>请上传车主身份证正面照 <View>(证件号码清晰)</View></View>
                     }
                     {
                       fileList[0] && <Image src={fileList[0]} className='upload-img'/>
                     }
                   </View>
                  {/*{
                    // 货车未上牌需要身份证反面
                    // 货车公车只需要营业执照
                    isPublic === 1 && currentNavId === huocheId &&
                    <View className='file-wrap' onClick={this.uploadFile.bind(this, 4)}>
                       <Image src={require('../../assets/img/icon_04.png')} className='upload-icon'/>
                       <View className='title placeholder-class'>请上传车主身份证反面照 <View>(证件清晰)</View></View>
                      {
                        fileList[4] && <Image src={fileList[4]} className='upload-img' />
                      }
                    </View>
                  }*/}
                   <View className='file-wrap' onClick={this.uploadFile.bind(this, 2)}>
                      <Image src={require('../../assets/img/icon_04.png')} className='upload-icon' />
                      <View className='title placeholder-class'>请上传购车发票</View>
                     {
                       fileList[2] && <Image src={fileList[2]} className='upload-img' />
                     }
                   </View>
                   <View className='file-wrap' onClick={this.uploadFile.bind(this, 3)}>
                      <Image src={require('../../assets/img/icon_04.png')} className='upload-icon'/>
                      <View className='title placeholder-class'>请上传车辆合格证</View>
                     {
                       fileList[3] && <Image src={fileList[3]} className='upload-img'/>
                     }
                   </View>
                </View>
              }
            </View>

            {/*备注框*/}
            <View className='form-wrap__group form-wrap__mark bbnone'>
              <Textarea className='textarea' name='message' value='' placeholder='请输入相关备注信息(选填)' placeholderClass='placeholder-class' />
            </View>
            <View className='page-submit tax-submit'>
              <View className='once-info'>
                <View className='text'>车船税: <Text className='yuan'>{Number(trueTaxPrice.originalPrice || 0).toFixed(2)}</Text> </View>
                {
                  Object.keys(trueTaxPrice).length>0&&trueTaxPrice.commission!=='0%'&&
                  <View className='text'>平台补贴: {trueTaxPrice.commission || '0%'}</View>
                }
                {trueTaxPrice.lateFee>0 &&
                  <View className='text'>滞纳金: ￥{Number(trueTaxPrice.lateFee).toFixed(2)}</View>
                }
              </View>
              <Button formType='submit'className='once-pay' disabled={isSubmit}>立即缴费 <Text
                className='small'>￥</Text>{(Number(trueTaxPrice.price || 0)+ Number(trueTaxPrice.lateFee||0)).toFixed(2)}元</Button>
            </View>
          </Form>
        </View>

        <View>
          <AtCurtain
            isOpened={isOpen}
            onClose={this.onClose.bind(this)}
          >
            <View className='china'>
              {
                china.map((item, index) => {
                  return (
                    <Text className={index === currentChinaIndex ? 'item item-active' : 'item'}
                          onClick={this.setIndex.bind(this, 'currentChinaIndex', index)}
                    >{item}</Text>
                  )
                })
              }
            </View>
          </AtCurtain>
        </View>

        <View className='footer-block' />

      </View>
    )
  }
}

export default Index
